<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>注册账号</title>
    {% include 'system/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='system/admin/css/other/login.css') }}"/>
    <style>
        .register-page {
            min-height: 100vh;
            background-image: url('/static/images/bj.png');
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .register-form {
            background: #fff;
            padding: 30px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            width: 100%;
            max-width: 500px;
        }

        .register-title {
            text-align: center;
            margin-bottom: 30px;
        }

        .register-title h2 {
            font-size: 24px;
            color: #333;
            margin-bottom: 10px;
        }

        .register-title p {
            color: #999;
            font-size: 14px;
        }

        .layui-form-item {
            margin-bottom: 20px;
        }

        .layui-form-label {
            width: 100px;
            padding: 9px 15px;
            text-align: right;
        }

        .layui-input-block {
            margin-left: 130px;
        }

        .layui-input {
            height: 38px;
            line-height: 38px;
            border: 1px solid #e6e6e6;
            border-radius: 2px;
        }

        .layui-btn {
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            background-color: #1E9FFF;
            border: none;
            border-radius: 2px;
            width: 100%;
        }

        .layui-btn-primary {
            background-color: #fff;
            border: 1px solid #1E9FFF;
            color: #1E9FFF;
        }

        .layui-btn-primary:hover {
            background-color: #1E9FFF;
            color: #fff;
        }

        .verification-code {
            display: flex;
            gap: 10px;
        }

        .verification-code .layui-input {
            flex: 1;
        }

        .verification-code .layui-btn {
            width: auto;
            min-width: 120px;
        }

        .back-to-login {
            text-align: center;
            margin-top: 20px;
        }

        .back-to-login a {
            color: #1E9FFF;
            text-decoration: none;
        }

        .back-to-login a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
<div class="register-page">
    <div class="register-form">
        <div class="register-title">
            <h2>注册账号</h2>
            <p>基于Flask的可视化分析系统</p>
        </div>
        <form class="layui-form" lay-filter="registerForm">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" required lay-verify="required|email" placeholder="请输入邮箱"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-block">
                    <div class="verification-code">
                        <input type="text" name="emailCode" required lay-verify="required" placeholder="请输入验证码"
                               autocomplete="off" class="layui-input">
                        <button type="button" class="layui-btn layui-btn-primary" id="sendRegisterCode">获取验证码</button>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" required lay-verify="required|pass" placeholder="请输入密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input type="password" name="confirmPassword" required lay-verify="required|confirmPass" placeholder="请确认密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 0;">
                    <button class="layui-btn" lay-submit lay-filter="register">注册</button>
                </div>
            </div>
            <div class="back-to-login">
                <a href="{{ url_for('system.passport.login') }}">返回登录</a>
            </div>
        </form>
    </div>
</div>

<!-- 资 源 引 入 -->
{% include 'system/common/footer.html' %}
<script>
    layui.use(['form', 'button', 'popup', 'layer'], function () {
        var form = layui.form;
        var button = layui.button;
        var popup = layui.popup;
        let layer = layui.layer;
        let $ = layui.jquery;
        let captchaPath = "{{ url_for('system.passport.captcha') }}";

        // 自定义验证规则
        form.verify({
            pass: [
                /^[\S]{6,12}$/,
                '密码必须6到12位，且不能出现空格'
            ],
            confirmPass: function(value) {
                var password = $('input[name=password]').val();
                if(value !== password) {
                    return '两次输入的密码不一致';
                }
            }
        });

        // 发送验证码点击事件
        $("#sendRegisterCode").click(function() {
            let email = $('input[name=email]').val();
            if(!email) {
                popup.failure('请输入邮箱');
                return;
            }
            
            let btn = $(this);
            // 发送验证码请求
            $.ajax({
                url: "{{ url_for('system.passport.send_register_code') }}",
                type: "post",
                data: {email: email},
                success: function(res) {
                    if(res.success) {
                        popup.success('验证码已发送');
                        // 倒计时
                        let countdown = 60;
                        btn.attr('disabled', true);
                        let timer = setInterval(function() {
                            if(countdown > 0) {
                                btn.text(countdown + '秒后重试');
                                countdown--;
                            } else {
                                clearInterval(timer);
                                btn.attr('disabled', false);
                                btn.text('获取验证码');
                            }
                        }, 1000);
                    } else {
                        popup.failure(res.msg);
                    }
                }
            });
        });

        // 注册提交
        form.on('submit(register)', function(data) {
            let loader = layer.load();
            let btn = button.load({elem: '.register'});
            $.ajax({
                url: "{{ url_for('system.passport.register') }}",
                type: "post",
                data: data.field,
                success: function(res) {
                    layer.close(loader);
                    btn.stop(function() {
                        if(res.success) {
                            popup.success(res.msg, function() {
                                location.href = "{{ url_for('system.passport.login') }}";
                            });
                        } else {
                            popup.failure(res.msg);
                        }
                    });
                }
            });
            return false;
        });
    });
</script>
</body>
</html> 